<template>
	<div class="card">
		<div style="width: 800px; margin: auto">
			<div style="margin-top: 10px">
				选择图片(可多选):
				<input type="file" ref="hiddenfile" accept="image/*" multiple @change="handleFile" class="hiddenInput" />
			</div>

			<div style="width: 400px; margin: auto; margin-top: 10px">
				<div style="width: 400px; font-size: 12px">可以拖动图片改变顺序</div>
				<draggable
					:list="selFiles"
					item-key="id"
					class="list-group"
					ghost-class="ghost"
					@start="dragging = true"
					@end="dragging = false"
				>
					<template #item="{ element, index }">
						<div class="list-group-item">
							<img class="fg" :id="'fg' + element.id" :src="element.fileimg" style="display: block; width: 400px" />
							<div @click="del(index)" style="position: absolute; top: 0; right: 0; width: 40px; height: 40px">
								<el-icon style="width: 40px; height: 40px; font-size: 20px; color: white; opacity: 0.8">
									<Delete />
								</el-icon>
							</div>
						</div>
					</template>
				</draggable>
			</div>
			<div>
				<el-button
					ref="downButtonRef"
					:disabled="buttonEnable === true ? false : true"
					type="info"
					plain
					@click="down"
					style="width: 400px; margin-top: 10px"
					>合并图片并下载</el-button
				>
			</div>
		</div>
	</div>
</template>

<script>
import { ref } from 'vue'
import draggable from 'vuedraggable'
export default {
	name: 'ImageMerge',
	components: {
		draggable
	},
	setup() {
		//最大高度和最大宽度
		let maxWidth = 0
		let maxHeight = 0
		//选中的图片文件，保存在数组中
		const selFiles = ref([])
		//得到各图片的最大高度和最大宽度
		const getImgMaxWidthHeight = () => {
			//let allHeight = 0;
			for (let i = 0; i < selFiles.value.length; i++) {
				let one = selFiles.value[i]
				//得到高度
				let img = document.getElementById('fg' + one.id)
				let width = img.naturalWidth
				let height = img.naturalHeight
				console.log('width:' + width + ';height:' + height)
				if (width > maxWidth) {
					maxWidth = width
				}
				if (height > maxHeight) {
					maxHeight = height
				}
			}
			console.log('maxWidth:' + maxWidth + ';maxHeight:' + maxHeight)
		}

		//垂直方向合并时，得到高度:
		const getImgDestHeight = () => {
			let allHeight = 0
			for (let i = 0; i < selFiles.value.length; i++) {
				let one = selFiles.value[i]
				//得到高度
				let img = document.getElementById('fg' + one.id)
				let width = img.naturalWidth
				let height = img.naturalHeight
				let destHeightOne = (maxWidth * height) / width
				allHeight = allHeight + destHeightOne
			}
			console.log('allHeight:' + allHeight)
			return allHeight
		}

		//下载pdf
		const down = async () => {
			getImgMaxWidthHeight()

			//得到合并后图片的高度
			let destHeight = getImgDestHeight()
			console.log('destHeight:' + destHeight)

			//生成合并后图片
			const canvas = document.createElement('canvas')
			canvas.width = maxWidth
			canvas.height = destHeight
			const context = canvas.getContext('2d')

			let top = 0
			//合并图片
			for (let i = 0; i < selFiles.value.length; i++) {
				console.log(i)
				let one = selFiles.value[i]
				//得到当前图片的高度
				let img = document.getElementById('fg' + one.id)
				let width = img.naturalWidth
				let height = img.naturalHeight
				let destHeightOne = (maxWidth * height) / width
				context.drawImage(img, 0, top, maxWidth, destHeightOne)
				top = top + destHeightOne
			}
			//下载图片
			downJpgByCanvas(canvas)
		}

		//下载图片
		const downJpgByCanvas = canvas => {
			let oA = document.createElement('a')
			let time = timeFormat()
			oA.download = 'img_' + time + '.jpg' // 设置下载的文件名，默认是'下载'
			oA.href = canvas.toDataURL('image/jpeg')
			document.body.appendChild(oA)
			oA.click()
			oA.remove() // 下载之后把创建的元素删除
		}

		//选中图片时，把图片添加到数组
		const handleFile = e => {
			let filePaths = e.target.files
			//清空原有缩略图
			if (filePaths.length === 0) {
				//未选择，则返回
				return
			} else {
				//清空数组中原有图片
				selFiles.value.length = 0
			}
			//把新选中的图片加入数组
			for (let i = 0; i < filePaths.length; i++) {
				let file = filePaths[i]
				let reader = new FileReader()
				reader.readAsArrayBuffer(file)
				//reader.
				let one = {
					id: i,
					fileimg: URL.createObjectURL(file), //预览用
					file: file
				}
				selFiles.value[i] = one
			}
			setButton()
		}

		//设置下载button是否可用
		const buttonEnable = ref(false)
		const setButton = () => {
			console.log('files length:' + selFiles.value.length)
			if (selFiles.value.length > 0) {
				buttonEnable.value = true
			} else {
				buttonEnable.value = false
			}
		}

		//补0
		const add0 = m => {
			return m < 10 ? '0' + m : m
		}
		//格式化时间
		const timeFormat = () => {
			let time = new Date()
			let y = time.getFullYear()
			let m = time.getMonth() + 1
			let d = time.getDate()
			let h = time.getHours()
			let mm = time.getMinutes()
			let s = time.getSeconds()
			let res = y + add0(m) + add0(d) + add0(h) + add0(mm) + add0(s)
			return res
		}

		return {
			down,
			handleFile,
			selFiles,
			buttonEnable
		}
	}
}
</script>

<style scoped></style>
